<div nz-row class="main-row">
  <div
    class="col"
    nz-col
    nz-resizable
    (nzResize)="onResize($event)"
    [nzMinColumn]="3"
    [nzMaxColumn]="20"
    [nzGridColumnCount]="24"
    [nzSpan]="col"
  >
    <div class="col-inner col-inner-left">
      <div>
        <a
          class="header-button"
          [routerLink]="['/home']"
          routerLinkActive="active"
          >返回首页</a
        >
        <a
          class="header-button"
          *ngIf="currentPageIndex !== 0"
          (click)="toPreviousPage()"
          >上一页</a
        >
        <a class="header-button" (click)="forceToNextPage()">跳过本页</a>
      </div>
      <ng-scrollbar class="markdown-wrapper">
        <div
          markdown
          lineNumbers
          class="markdown"
          [data]="markdown"
          (ready)="onReady()"
        ></div>
      </ng-scrollbar>
      <div class="task-wrapper">
        <div class="task">
          <nz-collapse>
            <nz-collapse-panel
              *ngFor="let item of tasks"
              [nzHeader]="item.title"
              [nzActive]="false"
              [nzShowArrow]="item.description !== ''"
              [nzExtra]="extraTpl"
              [nzDisabled]="false"
            >
              <span
                [innerText]="taskDescriptionWrapper(item.description)"
                class="task-description"
              ></span>
              <ng-template #extraTpl>
                <span class="task-state-emoji" *ngIf="item.done; else todo"
                  >✔️</span
                >
                <ng-template #todo>🙋</ng-template>
              </ng-template>
            </nz-collapse-panel>
          </nz-collapse>
        </div>
      </div>
    </div>
    <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
  </div>
  <div class="col" nz-col [nzSpan]="24 - col">
    <div class="col-inner code-wrapper">
      <div class="monaco-wrapper">
        <nz-code-editor
          class="editor"
          [(ngModel)]="code"
          [nzLoading]="!pyodideLoaded || !editorLoaded"
          [nzEditorOption]="{ language: 'python', fontSize: 20, wordWrap: 'on' }"
          (nzEditorInitialized)="onEditorInit($event)"
        ></nz-code-editor>
      </div>
      <div class="input-div">
        <textarea
          class="input-textarea"
          placeholder="请在这里留下想要输入的内容"
          rows="4"
          nz-input
          [(ngModel)]="inputText"
          (change)="inputTextChanged()"
        ></textarea>
      </div>
    </div>
  </div>
  <nz-modal
    [(nzVisible)]="isRunModalVisible"
    nzTitle="运行"
    [nzCancelText]="null"
    [nzOkLoading]="codeRunning"
    (nzOnOk)="onRunModalOk()"
    (nzOnCancel)="onRunModalCancel()"
    [nzMask]="false"
    nzAutofocus="ok"
  >
    <ng-container *nzModalContent>
      <div
        class="output"
        [innerText]="output"
        [ngClass]="runModalOutputStyle"
      ></div>
      <div class="task-done" *ngIf="currentCheckResult">
        {{ taskDonePrompt }}
      </div>
    </ng-container>
  </nz-modal>
  <nz-modal
    [(nzVisible)]="isTestModalVisible"
    nzTitle="建议"
    [nzCancelText]="null"
    (nzOnOk)="closeTestModal()"
    (nzOnCancel)="closeTestModal()"
    [nzMask]="false"
    nzAutofocus="ok"
  >
    <ng-container *nzModalContent>
      <div [innerText]="testText"></div>
    </ng-container>
  </nz-modal>
</div>
